<template>
	<view>
		<u-popup :show="vipPopupShow" mode="bottom" @close="close" :closeable="true" style="position: relative;">
			<scroll-view scroll-y>
				<view style="padding: 30rpx;" class="popup-y">
					<text class="title">圈子会员服务费</text>
					<div class="list" style="margin-top: 20rpx;">
						<div class="list-item" v-for="(it,index) in payList" @click="setCurrentType(index)">
							
							<div
								:class="currentType === index ? 'pay acitve flex-column-center' : 'pay flex-column-center' ">
								<image :src="it.img" mode="widthFix" style="width: 100%;"></image>
								<div class="pay-time">{{it.type === 1 ? '月费' : it.type === 2 ? '年费' : '永久'}}</div>
								<div :class="currentType === index ? 'pay-price acitve' : 'pay-price'">
									<span>￥</span>{{it.price ? Number(it.price) : ''}}</div>
							</div>
						</div>
					</div>
					<view class="flex-row-center" style="margin: 30rpx 0;">
						<u-checkbox activeColor="#67b12f" shape="circle" @change="change"></u-checkbox>
						<text class="label" @click="open">购买表示你已经同意服务协议</text>
					</view>
					<u-line dashed></u-line>
					<view class="title" style="margin: 20rpx 0;">会员权益</view>
					<view class="table">
						<image :src="counterpoise ? counterpoise : ''" mode="widthFix"></image>

					</view>
					<view class="placeholder"></view>
				</view>
			</scroll-view>
			<view class="pay-bottom">
				<!-- <view class="flex-row-between">
					<view style="font-size: 40rpx; color: #dd5c49;">
						<text>￥</text>398<text style="font-size: 26rpx;"> / 1年</text><text
							style="font-size: 20rpx; color: #afafaf; text-decoration: line-through; margin-left: 10rpx;">￥398</text>
					</view>
					<view class="discounts">优惠后￥0.95/天</view>
				</view>
				<view class="pay-coupon">已使用50元优惠券</view> -->
				<view class="pay-botton" @click="buy">立即购买</view>
			</view>
		</u-popup>
		<PrivacyAgreement ref="privacyAgreementRef" />
	</view>

</template>

<script>
	import {
		circle_right,
		circle_price,
		circle_pay,
		polling_circle_pay
	} from '@/common/http/api.js'
	import PrivacyAgreement from '@/components/privacy-agreement/privacy-agreement.vue'
	export default {
		components:{
			PrivacyAgreement,
		},
		data() {
			return {
				vipPopupShow: false,
				payList: [],
				right: {},
				currentType: 0,
				checked: false,
				counterpoise: '',
				row: '',
				payLoading: false,
				term: ''
			}
		},
		methods: {
			open() {
				
				this.term.replace(/\n/g, '&#10;')
				this.$refs.privacyAgreementRef.show(this.term)
			},
			change(e) {
				this.checked = e
				console.log('e', e)
			},
			setCurrentType(index) {
				this.currentType = index
			},
			show(row) {
				this.row = row
				this.vipPopupShow = true
				this.payList = row.circle_pay
				this.counterpoise = row.counterpoise
				this.payLoading = false
				this.term = row.term
				// circle_price({
				// 	id: 5
				// }).then(res => {
				// 	this.payList = res.data.price ?? []
				// 	this.right = res.data.right ?? {}
				// 	this.vipPopupShow = true
				// })
			},
			close() {
				this.vipPopupShow = false
			},
			buy() {
				if (!this.checked) {
					this.$u.toast('请先勾选服务协议！')
					return
				}
				let current = this.payList[this.currentType]
				uni.showLoading({
					mask: true,
					title: '支付中'
				})
				circle_pay({
					id: current.id,
					type: 5
				}).then(res => {
					uni.hideLoading()
					//调用微信官方支付接口弹出付款界面,输入密码扣款
					wx.requestPayment({
						timeStamp: String(res.data.timeStamp),
						nonceStr: res.data.nonceStr,
						package: res.data.package,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success: () => {
						
							// uni.showToast({duration:3000,
							// 	title: '支付成功',
							// 	icon: 'none'
							// })
							// this.$emit('reload', this.row)
							// this.close()
							//轮询
							this.payLoading = true
							this.getStatus(this.row.id, res.data.order_id)
						},
						fail: function(err) {
							
						}
					})
				})
			},
			getStatus(id, order_id) {
				if (this.payLoading === false) return
				uni.showLoading({
					title: '查询中',
					mask: true
				})
				polling_circle_pay({
					circle_id: id,
					order_id
				}).then(res => {
					if (res.data === 1) {
						//成功的
						this.payLoading = false

						uni.hideLoading()
						this.$u.toast('支付成功！')
						this.$emit('reload', this.row)
						this.close()

					} else {
						setTimeout(() => {
							this.getStatus(id, order_id)
						}, 2000)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pay-container {
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0rpx 6rpx 15rpx #f3f0e7;

		// height: 200rpx;
		&.acitve {

			box-shadow: 0rpx 6rpx 15rpx #df614d;
		}
	}

	.pay-bottom {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 20rpx 40rpx 40rpx;
		background-color: #fff;
		box-sizing: border-box;

		.discounts {
			font-size: 26rpx;
			color: #d68238;
		}

		.pay-coupon {
			font-size: 20rpx;
			color: #777777;
			margin: 10rpx 0;
		}

		.pay-botton {
			width: 100%;
			padding: 20rpx 0;
			text-align: center;
			background-color: #dd5845;
			border-radius: 50rpx;
			color: #fff;
		}
	}

	.placeholder {
		height: 200rpx;
	}

	.table {
		image {
			width: 100%;
		}

		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: -10px 0 10px -5px #f8f8f8,
		/* 左侧阴影 */
		10px 0 10px -5px #f8f8f8,
		/* 右侧阴影 */
		0 10px 10px -5px #f8f8f8;

		/* 底部阴影 */
		.cell {
			padding: 20rpx;

			.right {
				width: 60rpx;
				text-align: center;
				color: #ab9871;
			}

			.wrong {
				width: 60rpx;
				text-align: center;
				color: #aeaeae;
			}
		}

	}

	.title {
		font-size: 35rpx;
		font-weight: bold;
	}



	.header-c-t-l-member {
		margin-right: 5rpx;
	}

	.content-img {
		width: 100%;

		image {
			width: 100%;
		}
	}

	.popup-y {
		max-height: 70vh;
	}

	.pay {
		width: 100%;
		
		background-color: #fff;
		border: 1px solid #f3f0e7;
		
		border-radius: 10rpx;
		&>div {
			position: relative;
		}
		&-time {
			font-size: 30rpx;
			font-weight: bold;
			color: #d17d68;
		}

		&-price {
			font-size: 40rpx;
			font-weight: bold;
			color: #d17d68;
			margin: 10rpx 0;
		}

		&-price.acitve {
			color: #df614d;
		}

		&-calc {
			font-size: 20rpx;
			color: #d18370;
		}

		&-tag {
			width: 100%;
			background-color: #f3f0e7;
			padding: 10rpx 0;
			font-size: 20rpx;
		}

		&-tag.acitve {
			background-color: #df614d;
		}
	}

	.pay.acitve {
		border-color: #df614d;
	}

	.pay-time {
		color: #8A501D;
		font-size: 40rpx!important;
		padding-top: 0!important;
	}

	.list {
		.list-item {
			width: 100%;
			margin-bottom: 20rpx;
			.pay {
				position: relative;
			}
			image {
				width: 100%;
				border-radius: 10rpx;
			}
			
			.pay-time {
				width: calc(100% - 20rpx);
				box-sizing: border-box;
				padding: 0 20rpx;
				padding-top: 20rpx;
				position: absolute;
				top: 20rpx;
				left: 20rpx;
				font-size: 60rpx;
			}
			.pay-price {
				position: absolute;
				right: 20rpx;
				font-size: 68rpx;
			}
		}
		.list-item:last-child {
			margin-bottom: 0;
		}
	}
</style>